<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/userwelcome' }"
        >首页</el-breadcrumb-item
      >
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>统计报表</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="charts">
      <el-card>
        <!-- 头三框 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-card body-style="height:150px">
              <div class="left-image-container">
                <i
                  class="el-icon-s-custom left-image"
                  style="font-size: 70px; color: #409eff"
                ></i>
              </div>
              <div class="text-container">
                <div class="text-content">登录时间</div>
                <div class="text-number">{{ createNowTime }}</div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card body-style="height:150px">
              <div class="left-image-container">
                <i
                  class="el-icon-message-solid left-image"
                  style="font-size: 70px; color: #e6a23c"
                ></i>
              </div>
              <div class="text-container">
                <div class="text-content">消息</div>
                <div class="text-number">{{ totalCardInfo[1] }}</div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card body-style="height:150px">
              <div class="left-image-container">
                <i
                  class="el-icon-view left-image"
                  style="font-size: 70px; color: #f56c6c"
                ></i>
              </div>
              <div class="text-container">
                <div class="text-content">总消费</div>
                <div class="text-number">￥{{ totalCardInfo[2] }}</div>
              </div>
            </el-card>
          </el-col>
        </el-row>

        <!-- 后三框架 -->
        <el-row :gutter="20">
          <el-col :span="6">
            <el-card body-style="height:650px">
              <!-- 用户信息表单 -->
              <!-- 头像 -->
              <div class="text item">
                <el-avatar :size="'larger'" :src="userInfo.userPicture" />
              </div>
              <div class="text item">
                <i class="el-icon-user-solid" />
                用户昵称:<span>{{ userInfo.userName }}</span>
              </div>
              <div class="text item">
                <i class="el-icon-phone" />
                电话号码:<span>{{ userInfo.userTel }}</span>
              </div>
              <div class="text item">
                <i class="el-icon-burger" />
                用户生日:<span>{{ userInfo.birthday }}</span>
              </div>
              <div class="text item">
                <i class="el-icon-location" />
                详细地址:<span>{{ userInfo.location }}</span>
              </div>
              <div class="text item">
                <i class="el-icon-message" />
                电子邮箱:<span>{{ userInfo.eMail }}</span>
              </div>
              <div class="text item">
                <i class="el-icon-watch-1" />
                创建时间:<span>{{ reveredMessage }}</span>
              </div>
            </el-card>
          </el-col>
          <el-col :span="18">
            <!-- 统计报表 -->
            <el-card>
              <div id="barGraph" style="height: 650px"></div>
            </el-card>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <!-- 通知栏 -->
            <el-card body-style="height:250px"> </el-card>
          </el-col>

          <!-- 订单详细 -->
          <el-col :span="12">
            <el-card body-style="height:250px">
              <!-- 消费账单 -->
              <el-table
                :data="orderInfo"
                style="width: 100%"
                height="250px"
              >
                <el-table-column type="expand">
                  <template slot-scope="props">
                    <el-form
                      label-position="bottom"
                      inline
                      class="demo-table-expand"
                    >
                      <el-form-item label="订单编号:">
                        <span>{{ props.row.orderId }}</span> </el-form-item
                      ><br />
                      <el-form-item label="订单名称:">
                        <span>{{ props.row.orderName }}</span> </el-form-item
                      ><br />
                      <el-form-item label="创建时间:">
                        <span>{{ props.row.orderTime }}</span> </el-form-item
                      ><br />
                      <el-form-item label="卡包编号:">
                        <span>{{ props.row.cardPackId }}</span> </el-form-item
                      ><br />
                      <el-form-item label="商品详情:">
                        <span>{{ props.row.orderComment }}</span>
                      </el-form-item>
                    </el-form>
                  </template>
                </el-table-column>
                <el-table-column prop="orderName"> </el-table-column>
                <el-table-column prop="orderTime"> </el-table-column>
                <el-table-column prop="totalPrice"> </el-table-column>
              </el-table>
            </el-card>
          </el-col>
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<script>
// 统计报表网络请求
import { getDataChart } from "network/statistic";
import LoginMerchantVue from '../../../common/loginmerchant/LoginMerchant.vue';
// 引入基本模板,按需加载
let echarts = require("echarts/lib/echarts");
// 引入柱状图
require("echarts/lib/chart/bar");
// 引入柱状图
require("echarts/lib/chart/pie");
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");

export default {
  name: "Echarts",
  data() {
    return {
      // 存储从接口拿到的
      yearConsume: [],
      // 按月份消费
      // merchantGroupReportByMonth:[]
      // 用户信息表单
      userInfo: {
        birthday: window.sessionStorage.getItem("birthday"),
        userPicture: "http://qtpd7mr9w.hn-bkt.clouddn.com/15851294598.jpg",
        userRealName: window.sessionStorage.getItem("userRealName"),
        registrationDate: 1212695338000,
        userTel: window.sessionStorage.getItem("userIdTel"),
        location: window.sessionStorage.getItem("location"),
        userName: window.sessionStorage.getItem("userName"),
        eMail: window.sessionStorage.getItem("email"),
      },

      //头像信息
      headImageInfo: {},

      // 订单详情
      orderInfo: [
        
      ],

      // 统计报表数据
      tag: [
        "category",
        "一月",
        "二月",
        "三月",
        "四月",
        "五月",
        "六月",
        "七月",
        "八月",
        "九月",
        "十月",
        "十一月",
        "十二月",
      ],
      month: [
        "一月",
        "二月",
        "三月",
        "四月",
        "五月",
        "六月",
        "七月",
        "八月",
        "九月",
        "十月",
        "十一月",
        "十二月",
      ],
      totalAll: [],
      figure1: [],
      figure2: [],
      figure3: [],
      figure4: [],
      figure5: [],
      figure6: [],
      figure7: [],
      figure8: [],
      figure9: [],
      figure10: [],
      // 卡片上的数组信息
      totalCardInfo: [],
    };
  },
  // 页面一开始进行该操作
  created() {
    //从sessionStorage中拿到数据,拷贝数组
    this.figure1 = [...JSON.parse(sessionStorage.getItem("figure1"))];
    this.figure2 = [...JSON.parse(sessionStorage.getItem("figure2"))];
    this.figure3 = [...JSON.parse(sessionStorage.getItem("figure3"))];
    this.figure4 = [...JSON.parse(sessionStorage.getItem("figure4"))];
    this.figure5 = [...JSON.parse(sessionStorage.getItem("figure5"))];
    this.figure6 = [...JSON.parse(sessionStorage.getItem("figure6"))];
    this.figure7 = [...JSON.parse(sessionStorage.getItem("figure7"))];
    this.figure8 = [...JSON.parse(sessionStorage.getItem("figure8"))];
    this.figure9 = [...JSON.parse(sessionStorage.getItem("figure9"))];
    this.figure10 = [...JSON.parse(sessionStorage.getItem("figure10"))];
    this.totalAll = [...JSON.parse(sessionStorage.getItem("totalAll"))];
    this.totalCardInfo = [...JSON.parse(sessionStorage.getItem("totalCardInfo"))];
    // console.log("!!!!!!!");
    //拿到sessionStorage里的数据
    this.orderInfo=JSON.parse(sessionStorage.getItem("orderInfo"))
    


    // 画图
    // this.drawBar();

    
  },
  // 加载的时候再画图
  mounted() {
    //画图
    this.drawBar();
    //卡片总值
    // this.calCardTotal(this.totalAll)
    // console.log();

  },
  methods: {
    

    drawBar() {
      // 基于dom，初始化echarts实例
      let barGraph = echarts.init(document.getElementById("barGraph"));
      // 绘制图表
      barGraph.setOption({
        legend: {},
        tooltip: {
          trigger: "axis",
          // showContent: false,
        },
        dataset: {
          source: [
            this.tag,
            this.figure1,
            this.figure2,
            this.figure3,
            this.figure4,
            this.figure5,
            this.figure6,
            this.figure7,
            this.figure8,
            this.figure9,
            this.figure10,
          ],
        },
        xAxis: {
          type: "category",
          data: this.month,
        },
        yAxis: { gridIndex: 0 },
        grid: { top: "55%" },
        series: [
          {
            name: "",
            type: "bar",
            smooth: true,
            seriesLayoutBy: "row",
            data: this.totalAll,
            color: "#A7BFE8",
          },
          {
            type: "pie",
            id: "pie",
            radius: "30%",
            center: ["50%", "25%"],
            emphasis: { focus: "data" },
            label: {
              formatter: "{b}: {@一月} ({d}%)",
            },
          },
        ],
      });
      barGraph.on("updateAxisPointer", function (event) {
        var xAxisInfo = event.axesInfo[0];
        if (xAxisInfo) {
          var dimension = xAxisInfo.value + 1;
          barGraph.setOption({
            series: {
              id: "pie",
              label: {
                formatter: "{@category}: {@[" + dimension + "]} ({d}%)",
              },
              encode: {
                value: dimension,
                tooltip: dimension,
              },
            },
          });
        }
      });
    },
    // 转换时间格式
    transformTime(timestamp = +new Date(), flog) {
      if (flog == 1) {
        if (timestamp) {
          var time = new Date(timestamp);
          var y = time.getFullYear(); //getFullYear方法以四位数字返回年份
          var M = time.getMonth() + 1; // getMonth方法从 Date 对象返回月份 (0 ~ 11)，返回结果需要手动加一
          var d = time.getDate(); // getDate方法从 Date 对象返回一个月中的某一天 (1 ~ 31)
          var h = time.getHours(); // getHours方法返回 Date 对象的小时 (0 ~ 23)
          var m = time.getMinutes(); // getMinutes方法返回 Date 对象的分钟 (0 ~ 59)
          var s = time.getSeconds(); // getSeconds方法返回 Date 对象的秒数 (0 ~ 59)
          return " " + y + "-" + M + "-" + d + " ";
        } else {
          return "";
        }
      } else {
        let time = new Date();
        var y = time.getFullYear(); //getFullYear方法以四位数字返回年份
        var M = time.getMonth() + 1; // getMonth方法从 Date 对象返回月份 (0 ~ 11)，返回结果需要手动加一
        var d = time.getDate(); // getDate方法从 Date 对象返回一个月中的某一天 (1 ~ 31)
        var h = time.getHours(); // getHours方法返回 Date 对象的小时 (0 ~ 23)
        var m = time.getMinutes(); // getMinutes方法返回 Date 对象的分钟 (0 ~ 59)
        var s = time.getSeconds(); // getSeconds方法返回 Date 对象的秒数 (0 ~ 59)
        return " " + y + "-" + M + "-" + d + " " + h + " : " + m + " : " + s;
      }
    },
  },
  computed: {
    reveredMessage: function () {
      return this.transformTime(this.userInfo.registrationDate, 1);
    },
    createNowTime: function () {
      return this.transformTime(this.userInfo.registrationDate, 2);
    },
  },
};
</script>

<style @lang="less" scope>
.text {
  font-size: 15px;
}

.item {
  margin-bottom: 46px;
  margin-top: 58px;
  margin-left: 23px;
}
.left-image-container {
  height: 70px;
  width: 70px;
  margin-left: 20px;
  margin-top: 40px;
}
.text-container {
  height: 120px;
  width: 150px;

  margin-left: 210px;
  margin-top: -70px;
}
.text-content {
  width: 70px;
  height: 20px;
  font-size: 14px;
  color: grey;
  margin-bottom: 10px;
}
.text-number {
  font-size: 16px;
  margin-left: -10px;
}
</style>